<template>
  <div>
    <router-link to="/demo2">routerlink跳转</router-link>

    <button @click="go">不传参数</button>
    <button @click="gin">query.path传参数</button>
    <button @click="out">params.name传参数</button>
    <br>
    <!-- //动态路由传参数,需要在跳转后的页面的路由接口上配置参数的名称 -->
    <!-- //path:'/demo2/:class',如在跳转后的demo2页面的路由接口上配置class参数名称 -->
    <!-- to="/demo2/超级一班",在router-link后面添加to跳转,在/demo2后面添加参数值,会自动拼接在url后面 -->
    <router-link to="/demo2/超级一班">动态传参数,路由接口配置参数名称,$route.params接收参数</router-link>
    <!-- 底部栏 -->
    <Footer/>
  </div>
</template>

<script>
//导入底部导航栏
import Footer from '@/components/Footer.vue';
// import { query } from 'express';

export default {
    //注册组件
    components: {
        Footer,
    },
    methods:{
      go(){
        this.$router.push('/demo2');
      },
      //path+query传参数,会自动拼接在url的后面,并且刷新之后还会存在
      gin(){
        this.$router.push({
          //path接收路由接口的地址
          path:'/demo2',
          query:{
            name:"小花",
            age:20
          }
        })
      },
      //name+params传参数,不会自动拼接到url后面,并且刷新之后不会存在
      out(){
        this.$router.push({
          //name接收的是路由器那边传的name唯一值
          name:'demo-detail',
          params:{
            age:'小白'
          }
        })
      },
    }
}
</script>

<style>

</style>